<template>
  <div>
    <van-nav-bar
  title="发布房源"
  left-arrow
  @click-left="$router.back()"
/>
<van-cell-group>
 <van-cell title="房源信息" class="hhh"/>
 <van-cell title="小区名称" @click="$router.push('/search-xiaoqu')" >请输入小区名称&nbsp;&nbsp;<van-icon name="arrow" /></van-cell>
</van-cell-group>
<van-cell-group class="money">
  <van-field  v-model="value1"
    label="租金"
    placeholder="请输入租金/月" />
    <div class="right">￥/月</div>
</van-cell-group>
<van-cell-group class="money">
  <van-field  v-model="value2"
    label="建筑面积"
    placeholder="请输入建筑面积" />
    <div class="right">&nbsp;&nbsp;&nbsp;m²</div>
</van-cell-group>
<van-cell is-link :value="value3" title="户型" @click="show = true" />
<van-popup
  v-model="show"
  position="bottom"
  :style="{ height: '30%' }"
>
<van-picker
  show-toolbar
  :columns="actions"
  @confirm="onConfirm"
  @cancel="onCancel"
/>
</van-popup>
<van-cell is-link :value="value4" title="所在楼层" @click="show1 = true" />
<van-popup
  v-model="show1"
  position="bottom"
  :style="{ height: '30%' }"
>
<van-picker
  show-toolbar
  :columns="actions1"
  @confirm="onConfirm2"
  @cancel="onCancel1"
/>
</van-popup>
<van-cell is-link :value="value5" title="朝向" @click="show2 = true" />
<van-popup
  v-model="show2"
  position="bottom"
  :style="{ height: '30%' }"
>
<van-picker
  show-toolbar
  :columns="actions2"
  @confirm="onConfirm3"
  @cancel="onCancel2"
/>
</van-popup>
<van-cell  title="房屋标题" />
<van-cell-group>
  <van-field v-model="value6"  placeholder="请输入标题(例如: 整租 小区名 2室 5000元)" />
</van-cell-group>
<van-cell  title="房屋图像" />
<van-uploader :after-read="afterRead">
   <van-button icon="plus" ></van-button>
</van-uploader>
<van-cell  title="房屋配置" />
<van-grid :gutter="10" :column-num="5" :border=false>
  <van-grid-item v-for="value in 10"  :key="value" icon="photo-o" text="文字" />
</van-grid>
<van-cell  title="房屋描述" />
 <van-field v-model="value7"  placeholder="请输入房屋描述信息" class="di" />
<div class="btn">
  <van-button type="default" class="white">取消</van-button>
 <van-button type="primary" class="green">提交</van-button>
</div>

  </div>
</template>

<script>
import { gToken, ggToken } from '@/utils/storage'
import { community } from '@/api/release-house'
export default {
  async created () {
    const res = await ggToken()
    console.log(res)
    const ress = await gToken()
    console.log(res, ress)
    const req = await community(ress, res)
    console.log(req)
  },
  data () {
    return {
      value1: '',
      value2: '',
      value3: '请选择',
      value4: '请选择',
      value5: '请选择',
      value6: '',
      value7: '',
      show: false,
      show1: false,
      show2: false,
      actions: [
        '一室',
        '二室',
        '三室',
        '四室',
        '四室+'],
      actions1: [
        '高楼层',
        '中楼层',
        '低楼层'],
      actions2: [
        '东',
        '西',
        '南',
        '北',
        '东北',
        '东南',
        '西北',
        '西南'
      ]
    }
  },
  methods: {
    onConfirm (value, index) {
      console.log(value)
      this.value3 = value
      this.onCancel()
    },
    onConfirm2 (value, index) {
      console.log(value)
      this.value4 = value
      this.onCancel1()
    },
    onConfirm3 (value, index) {
      console.log(value)
      this.value5 = value
      this.onCancel2()
    },
    onCancel () {
      // console.log(1)
      this.show = false
    },
    onCancel1 () {
      // console.log(1)
      this.show1 = false
    },
    onCancel2 () {
      // console.log(1)
      this.show2 = false
    },
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    }
  }
}
</script>

<style lang="less" scoped>
 .hhh.van-cell {
color:#20b97a;
 }
.money {
  display: flex;
  .right {
    width: 6.5vh;
    height: 1.4vh;
    color: #888;
    margin-top: 1.6vh;
  }
}
.btn {
  width: 100%;
  // margin-top: 14.4vh;
  position: fixed;
  left: 0;
  bottom: 0;
.white{
  width: 50%;
  color: #20b97a;
  background-color: #fff;
  z-index: 1;
}
.green{
  width: 50%;
  background-color: #20b97a;
  z-index: 1;
}
}
.di {
  margin-bottom: 30vh;
}
</style>
